<template>
  <div class="user-info-form asset-info-form">
    <el-form label-width="150px" :model="basicPlatInfoForm" :rules="basicPlatInfoFormRules" ref="basicPlatInfoForm" @submit.native.prevent>
      <el-form-item label="平台名称：" prop='platId'>
        <tree-select
          v-model="basicPlatInfoForm.platId"
          filterable
          :width="386"
          :data="ucOrgList"
          :defaultProps="buildDefaultProps"
          :checkedKeys="defaultCheckedBuildId"
          :nodeKey="buildNodeKey">
        </tree-select>
      </el-form-item>
      <el-form-item label="空间名称："  prop='workName'>
        <el-input
          v-model="basicPlatInfoForm.workName"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="场景名称："  prop='sceneName'>
        <el-input
          v-model="basicPlatInfoForm.sceneName"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="三维信息："  prop='info3d'>
        <el-input
          v-model="basicPlatInfoForm.info3d"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="备注："  prop='remark'>
        <el-input
          v-model="basicPlatInfoForm.remark"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label-width="0" class="verifyidentity-button">
        <el-button @click.stop="closeFun(false)" round>取消</el-button>
        <el-button type="primary" @click="saveGridInfo('basicPlatInfoForm')" round>保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { saveOrUpdatePlatInfo } from '@/api/sysConfig'
import TreeSelect from '@/libs/TreeSelect/Main'
export default {
    name: 'BasicPlatInfo',
    // 引入子组件
    components: {
      TreeSelect
    },
    props: {
      platInfo: {
        type: Object
      },
      ucOrgList: {
        type: Array
      },
      closeFun: {
        type: Function,
        required: true
      },
    },
    data(){
      return {
        buildDefaultProps: {
          children: 'nodes',
          label: 'name',
          value: 'id'
        },
        buildNodeKey: 'id',
        defaultCheckedBuildId: [],
        // 表单数据
        basicPlatInfoForm: {
          platId: '',
          workName: '',
          sceneName: '',
          info3d: '',
          remark: ''
        },
        // 表单校验
        basicPlatInfoFormRules: {
          platId: [
            { required: true, message: '请选择平台名称', trigger: 'blur' }
          ],
          workName: [
            { required: true, message: '请输入空间名称', trigger: 'change' }
          ],
          sceneName: [
            { required: true, message: '请输入场景名称', trigger: 'change' }
          ]
        }
      }
    },
    created() {
      let that = this
      // 如果有历史值，设置回显
      if(that.platInfo.id) {
        that.basicPlatInfoForm.id =  that.platInfo.id
        that.basicPlatInfoForm.platId = that.platInfo.platId
        that.basicPlatInfoForm.workName = that.platInfo.workName
        that.basicPlatInfoForm.sceneName = that.platInfo.sceneName
        that.basicPlatInfoForm.info3d = that.platInfo.info3d
        that.basicPlatInfoForm.remark = that.platInfo.remark
      }
      if(that.platInfo.platId) {
         that.defaultCheckedBuildId = that.platInfo.platId.toString().split(',')
      }
    },
    methods: {
      // 保存
      saveGridInfo(formName) {
        // 阻止事件冒泡
        event.stopPropagation()
        let that = this
        let type = 1
        let parames = {}
        // 校验表单
        that.$refs[formName].validate((valid) => {
          if(valid) {
            var parames = {
              info3d : that.basicPlatInfoForm.info3d,
              platId : that.basicPlatInfoForm.platId,
              remark: that.basicPlatInfoForm.remark,
              sceneName: that.basicPlatInfoForm.sceneName,
              workName: that.basicPlatInfoForm.workName,
              id: that.platInfo.id
            }

            if(parames.id == null || parames.id == "") {
               parames.id = 0
            }
            // 调用保存接口
            saveOrUpdatePlatInfo(parames).then(res => {
              if(res.status === 200) {
                that.$message({
                  message: '保存成功！',
                  type: 'success'
                })
                // 关闭弹框
                that.closeFun(true)
              } else {
                that.$message({
                  message: '保存失败！',
                  type: 'warning'
                })
              }
            })
          } else {
              return false
          }
        })
      },
    }
  }
</script>
